import { createApp } from 'vue'
import 'virtual:windi.css'

import '@/assets/main.css'
import 'animate.css';
import 'nprogress/nprogress.css'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import store from './store'
import "@/permission"

// 代码高亮
import hljs from 'highlight.js'
import 'highlight.js/styles/tokyo-night-dark.css'

// 富文本图片点击预览
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";

// 添加全局样式
import './assets/main.css'

// 注入全局样式 - 为管理页面添加统一间距
const adminStyle = document.createElement('style')
adminStyle.innerHTML = `
/* 管理后台通用样式 */
.admin-page-spacer {
    height: 20px; /* 统一的上边距 */
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
    .admin-page-spacer {
        height: 10px;
    }
}
`
document.head.appendChild(adminStyle)

// 初始化暗黑模式，只在非后台管理路径下启用
const isAdminPage = window.location.hash.startsWith('#/admin');
const isUserPage = window.location.hash.startsWith('#/user');
if (!isAdminPage && !isUserPage && (localStorage.getItem('theme') === 'dark' || 
    (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches))) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// 路由变化时检查是否为后台管理页面或用户后台，是则移除暗黑模式
router.beforeEach((to, from, next) => {
  const isAdminRoute = to.path.startsWith('/admin');
  const isUserRoute = to.path.startsWith('/user');
  
  if (isAdminRoute || isUserRoute) {
    document.documentElement.classList.remove('dark');
  } else {
    // 非管理页面保持用户之前的主题设置
    if (localStorage.getItem('theme') === 'dark' ||
        (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    }
  }
  next();
});

const app = createApp(App)

app.use(store)
app.use(router)

// 代码高亮指令
app.directive('highlight',function (el) {
  let highlight = el.querySelectorAll('pre code');
  highlight.forEach((block)=>{
      hljs.highlightBlock(block)
  })
});

// 引入图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(Viewer, {
    defaultOptions: {
      inline: false,  // 默认值：false。启用内联模式。
      button: true,  // 在查看器的右上角显示按钮。
      navbar: true,  // 指定导航栏的可见性。
      title: true,  // 指定标题的可见性和内容。
      toolbar: true,  // 指定工具栏及其按钮的可见性和布局。
      tooltip: true,  // 放大或缩小时显示带有图像比率（百分比）的工具提示。
      movable: true,  // 启用以移动图像。
      zoomable: true,  // 启用以缩放图像
      rotatable: true,  // 启用以旋转图像
      scalable: true,  // 启用以缩放图像。
      transition: true,  // 为某些特殊元素启用CSS3转换。
      fullscreen: true,  // 启用以在播放时请求全屏。
      keyboard: true,  // 启用键盘支持。
    },
  });

app.mount('#app')
